<template>
	<!-- 绑定银行卡 -->
	<view class="addCard-main">
		<uni-forms :modelValue="formData">
			<uni-forms-item label="银行卡号" name="name" label-width="160rpx">
				<uni-easyinput type="text" v-model="formData.bank_card" placeholder="请输入银行卡号" />
			</uni-forms-item>
			<uni-forms-item label="预留手机号" name="age" label-width="160rpx">
				<uni-easyinput type="text" v-model="formData.bank_phone" placeholder="请输入预留手机号" />
			</uni-forms-item>

			<uni-forms-item label="验证码" name="age" label-width="160rpx">
				<view class="code-main">
					<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码" />
					<view class="codeBtn" @click="getCode">获取验证码</view>
				</view>
			</uni-forms-item>
		</uni-forms>

		<button type="default" style="background-color: #e43927; color: #fff">确认绑定</button>
	</view>
</template>

<script>
import { payapplyBindBankCard, paybindBankCard } from '../../api/payment/index.js';
export default {
	data() {
		return {
			formData: {
				bank_card: '',
				bank_phone: '',
				code: '',
				tranceNum: ''
			}
		};
	},
	methods: {
		// 获取验证码
		async getCode() {
			try {
				const resData = await payapplyBindBankCard({
					bank_card: this.formData.bank_card,
					bank_phone: this.formData.bank_phone
				});
				uni.showToast({
					title: '获取成功',
					icon: 'none'
				});
			} catch (e) {
				throw Error(e);
			}
		},

		// 提交绑定
		async getpaybindBankCard() {
			try {
				const resData = await paybindBankCard(this.formData);
				uni.showToast({
					title: '绑定成功',
					icon: 'none'
				});
				setTimeout(()=>{
					uni.navigateBack(-1);
				},500)
			} catch (e) {
				throw Error(e);
			}
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>

<style scoped lang="scss">
.addCard-main {
	box-sizing: border-box;
	padding: 20rpx;
	.code-main {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.codeBtn {
			background-color: #e43927;
			width: 160rpx;
			text-align: center;
			line-height: 60rpx;
			height: 60rpx;
			margin-left: 20rpx;
			color: #fff;
			border-radius: 6rpx;
			font-size: 26rpx;
		}
	}
}
</style>
